<template>
<div>
          <div style="display:flex;margin-bottom:8px;">
            <div :style="{boxSizing:'border-box',flex:'1',fontSize:'1rem',color:'#fff',paddingRight:'8px'}">
                
                <div style="border:1px solid #fff;border-radius:20px;padding:10px 10px;overflow:hidden;">

                      <div style="float:left;width:30%;">
                        <div style="width:100%;height:100%;">
                          <svg width="100%" xmlns="http://www.w3.org/2000/svg" height="100%" viewBox="0 0 16.271 15.656" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16.271 15.656" style="width: 100%; height: 100%; vertical-align: middle; fill: currentcolor; overflow: hidden; font-size: 200px;">
                            <path d="m2.842,13.67c.176,0 .318-.142 .318-.316v-5.455c0-.174-.143-.316-.318-.316h-1.215c-.177,0-.318,.143-.318,.316v5.455c0,.175 .142,.316 .318,.316h1.215z" fill="#ff1222"></path>
                            <path d="m15.762,14.201h-15.254c-.174,0-.317,.142-.317,.316v.822c0,.176 .144,.317 .317,.317h15.254c.176,0 .316-.142 .316-.317v-.822c0-.175-.14-.316-.316-.316z" fill="#ff1222"></path>
                            <path d="m6.777,13.67c.174,0 .316-.142 .316-.316v-5.455c0-.174-.143-.316-.316-.316h-1.217c-.174,0-.315,.143-.315,.316v5.455c0,.175 .142,.316 .315,.316h1.217z" fill="#ff1222"></path>
                            <path d="m14.646,13.67c.174,0 .317-.142 .317-.316v-5.455c0-.174-.144-.316-.317-.316h-1.218c-.175,0-.316,.143-.316,.316v5.455c0,.175 .142,.316 .316,.316h1.218z" fill="#ff1222"></path>
                            <path d="m15.858,5.798l-6.502-5.381c-.672-.555-1.77-.555-2.441,0l-6.5,5.381c-.674,.558-.509,1.012 .363,1.012h14.717c.87,0 1.034-.454 .363-1.012zm-7.723-.298c-.682,0-1.234-.554-1.234-1.235 0-.681 .553-1.233 1.234-1.233 .684,0 1.234,.552 1.234,1.233 0,.681-.55,1.235-1.234,1.235z" fill="#ff1222"></path>
                            <path d="m10.71,13.67c.176,0 .317-.142 .317-.316v-5.455c0-.174-.142-.316-.317-.316h-1.216c-.176,0-.317,.143-.317,.316v5.455c0,.175 .142,.316 .317,.316h1.216z" fill="#ff1222"></path>
                          </svg>
                            <!-- <img src="./img/greek.png" alt="" style="width:100%;"> -->
                        </div>
                      </div>

                      <div style="float:right;width:50%;text-align:right;">
                        <h2>物业</h2>
                        <h2>1</h2>
                      </div>

                </div>

            </div>
            <div :style="{boxSizing:'border-box',flex:'1',fontSize:'1rem',color:'#fff',paddingRight:'8px'}">
              

                <div style="border:1px solid #fff;border-radius:20px;padding:10px 10px;overflow:hidden;">


              <div style="float:left;width:30%;">
                <div style="width:100%;height:100%;">
                  <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" height="200" viewBox="0 0 40 40" style="width: 100%; height: 100%; vertical-align: middle; fill: currentcolor; overflow: hidden; font-size: 200px;" xml:space="preserve">
<g id="_x34_27._Network">
	<g>
		<path d="M34,26c3.313,0,6-2.687,6-6c0-3.314-2.687-6.001-6-6.001c-2.612,0-4.827,1.672-5.651,4.001H17.463l12.74-7.355
			C31.237,11.491,32.559,12,34,12c3.313,0,6-2.687,6-6c0-3.314-2.687-6-6-6c-3.314,0-6,2.686-6,6c0,0.42,0.044,0.829,0.126,1.225
			l-16.944,9.783C10.146,15.214,8.22,14,6,14c-3.313,0-6,2.686-6,6c0,3.313,2.687,6,6,6c2.221,0,4.146-1.215,5.182-3.009
			l16.944,9.783C28.044,33.17,28,33.58,28,34c0,3.312,2.686,6,6,6c3.313,0,6-2.688,6-6c0-3.314-2.687-6-6-6
			c-1.441,0-2.763,0.509-3.797,1.354L17.465,22h10.884C29.173,24.329,31.388,26,34,26z M34,18c1.104,0,2,0.895,2,2
			c0,1.104-0.896,2-2,2s-2-0.896-2-2C32,18.895,32.896,18,34,18z M34,4c1.104,0,2,0.895,2,2c0,1.104-0.896,2-2,2s-2-0.896-2-2
			C32,4.895,32.896,4,34,4z M6,22c-1.104,0-2-0.896-2-2c0-1.105,0.896-2,2-2s2,0.895,2,2C8,21.104,7.104,22,6,22z M34,32
			c1.104,0,2,0.895,2,2c0,1.104-0.896,2-2,2s-2-0.896-2-2C32,32.895,32.896,32,34,32z" fill="#4ec45a"></path>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                    <!-- <img src="./img/greek.png" alt="" style="width:100%;"> -->
                </div>
              </div>
              <div style="float:right;width:50%;text-align:right;">
                <h2>小区</h2>
                <h2>1</h2>
              </div>

              </div>

            </div>
            <div :style="{boxSizing:'border-box',flex:'1',fontSize:'1rem',color:'#fff',paddingRight:'8px'}">
              
              
                <div style="border:1px solid #fff;border-radius:20px;padding:10px 10px;overflow:hidden;">
              
              <div style="float:left;width:30%;">
                <div style="width:100%;height:100%;">
                  <svg viewBox="-36 0 512 512" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; vertical-align: middle; fill: currentcolor; overflow: hidden; font-size: 200px;"><path d="m120.46875 376.46875c0-8.300781 6.757812-15.058594 15.0625-15.058594h268.34375l36.140625-180.703125h-307.199219l-18.070312-90.355469h-114.746094v30.117188h90.054688l42.1875 210.945312c-23.382813 1.6875-41.890626 21.25-41.890626 45.054688 0 24.914062 20.265626 45.179688 45.179688 45.179688h286.117188v-30.117188h-286.117188c-8.304688 0-15.0625-6.757812-15.0625-15.0625zm42.464844-45.175781-9.035156-45.175781h56.925781v45.175781zm138.242187-45.175781v45.175781h-60.234375v-45.175781zm-60.234375-30.117188v-45.175781h60.234375v45.175781zm90.351563 75.292969v-45.175781h56.925781l-9.035156 45.175781zm62.949219-75.292969h-62.949219v-45.175781h71.984375zm-183.417969-45.175781v45.175781h-62.949219l-9.035156-45.175781zm0 0" fill="#1296db"></path><path d="m120.46875 466.824219c0 24.910156 20.269531 45.175781 45.179688 45.175781 24.910156 0 45.175781-20.265625 45.175781-45.175781 0-24.910157-20.265625-45.175781-45.175781-45.175781-24.910157 0-45.179688 20.265624-45.179688 45.175781zm45.179688-15.058594c8.300781 0 15.058593 6.753906 15.058593 15.058594 0 8.304687-6.757812 15.058593-15.058593 15.058593-8.304688 0-15.058594-6.753906-15.058594-15.058593 0-8.304688 6.753906-15.058594 15.058594-15.058594zm0 0" fill="#1296db"></path><path d="m301.175781 466.824219c0 24.910156 20.265625 45.175781 45.175781 45.175781 24.910157 0 45.179688-20.265625 45.179688-45.175781 0-24.910157-20.269531-45.175781-45.179688-45.175781-24.910156 0-45.175781 20.265624-45.175781 45.175781zm45.175781-15.058594c8.304688 0 15.058594 6.753906 15.058594 15.058594 0 8.304687-6.753906 15.058593-15.058594 15.058593-8.300781 0-15.058593-6.753906-15.058593-15.058593 0-8.304688 6.757812-15.058594 15.058593-15.058594zm0 0" fill="#1296db"></path><path d="m271.058594 30.117188c40.242187 0 78.175781 17.792968 104.074218 48.816406l23.121094-19.296875c-31.640625-37.902344-78-59.636719-127.195312-59.636719-49.195313 0-95.558594 21.734375-127.195313 59.636719l23.121094 19.300781c25.898437-31.027344 63.832031-48.820312 104.074219-48.820312zm0 0" fill="#1296db"></path><path d="m328.878906 117.480469 23.121094-19.300781c-20.125-24.113282-49.628906-37.945313-80.941406-37.945313s-60.816406 13.832031-80.941406 37.945313l23.121093 19.300781c14.386719-17.242188 35.464844-27.128907 57.820313-27.128907 22.359375 0 43.433594 9.886719 57.820312 27.128907zm0 0" fill="#1296db"></path><path d="m236.355469 136.71875 23.128906 19.292969c2.875-3.445313 7.09375-5.421875 11.574219-5.421875 4.480468 0 8.699218 1.976562 11.574218 5.421875l23.125-19.292969c-8.613281-10.324219-21.261718-16.25-34.699218-16.25s-26.085938 5.925781-34.703125 16.25zm0 0" fill="#1296db"></path></svg>
                    <!-- <img src="./img/greek.png" alt="" style="width:100%;"> -->
                </div>
              </div>
              <div style="float:right;width:50%;text-align:right;">
                <h2>商圈</h2>
                <h2>1</h2>
              </div>


            </div>

            </div>
            
            <div :style="{flex:'2',fontSize:'1rem',color:'#fff',padding:'10px 10px',overflow:'hidden',textAlign:'center'}">
              <div style="width:10%;margin:0 auto;">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16.271 15.656" xmlns:xlink="http://www.w3.org/1999/xlink" enable-background="new 0 0 16.271 15.656" style="width: 100%; height: 100%; vertical-align: middle; fill: currentcolor; overflow: hidden; font-size: 200px;">
                  <path d="m2.842,13.67c.176,0 .318-.142 .318-.316v-5.455c0-.174-.143-.316-.318-.316h-1.215c-.177,0-.318,.143-.318,.316v5.455c0,.175 .142,.316 .318,.316h1.215z" fill="#ff1222"></path>
                  <path d="m15.762,14.201h-15.254c-.174,0-.317,.142-.317,.316v.822c0,.176 .144,.317 .317,.317h15.254c.176,0 .316-.142 .316-.317v-.822c0-.175-.14-.316-.316-.316z" fill="#ff1222"></path>
                  <path d="m6.777,13.67c.174,0 .316-.142 .316-.316v-5.455c0-.174-.143-.316-.316-.316h-1.217c-.174,0-.315,.143-.315,.316v5.455c0,.175 .142,.316 .315,.316h1.217z" fill="#ff1222"></path>
                  <path d="m14.646,13.67c.174,0 .317-.142 .317-.316v-5.455c0-.174-.144-.316-.317-.316h-1.218c-.175,0-.316,.143-.316,.316v5.455c0,.175 .142,.316 .316,.316h1.218z" fill="#ff1222"></path>
                  <path d="m15.858,5.798l-6.502-5.381c-.672-.555-1.77-.555-2.441,0l-6.5,5.381c-.674,.558-.509,1.012 .363,1.012h14.717c.87,0 1.034-.454 .363-1.012zm-7.723-.298c-.682,0-1.234-.554-1.234-1.235 0-.681 .553-1.233 1.234-1.233 .684,0 1.234,.552 1.234,1.233 0,.681-.55,1.235-1.234,1.235z" fill="#ff1222"></path>
                  <path d="m10.71,13.67c.176,0 .317-.142 .317-.316v-5.455c0-.174-.142-.316-.317-.316h-1.216c-.176,0-.317,.143-.317,.316v5.455c0,.175 .142,.316 .317,.316h1.216z" fill="#ff1222"></path>
                </svg>
              </div>
              <div>星期三 4月22日 16:44:44</div>
            </div>
            <div :style="{flex:'1',fontSize:'1rem',color:'#fff',border:'1px solid #fff',borderRadius:'20px',padding:'10px 10px',overflow:'hidden'}">
              <div style="float:left;width:30%;">
                <div style="width:100%;height:100%;">
                  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="width: 100%; height: 100%; vertical-align: middle; fill: currentcolor; overflow: hidden; font-size: 200px;" xml:space="preserve" width="200" height="200">
<g>
	<g>
		<path d="M409.516,0H150.385c-5.633,0-10.199,4.566-10.199,10.199v219.283h-37.701c-5.633,0-10.199,4.566-10.199,10.199v262.12
			c0,5.633,4.566,10.199,10.199,10.199h307.032c5.633,0,10.199-4.566,10.199-10.199V10.199C419.715,4.566,415.149,0,409.516,0z
			 M288.18,491.602H112.682V249.88H288.18V491.602z M399.317,491.602h-90.737v-251.92c0-5.633-4.566-10.199-10.199-10.199H160.584
			V20.398h238.733V491.602z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M224.792,47.936h-35.106c-5.633,0-10.199,4.566-10.199,10.199v49.148c0,5.633,4.566,10.199,10.199,10.199h35.106
			c5.633,0,10.199-4.566,10.199-10.199V58.135C234.991,52.502,230.425,47.936,224.792,47.936z M214.593,97.084h-14.707v-28.75
			h14.707V97.084z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M297.435,47.936h-35.106c-5.633,0-10.199,4.566-10.199,10.199v49.148c0,5.633,4.566,10.199,10.199,10.199h35.106
			c5.633,0,10.199-4.566,10.199-10.199V58.135C307.634,52.502,303.068,47.936,297.435,47.936z M287.236,97.084h-14.707v-28.75
			h14.707V97.084z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M370.213,47.936h-35.106c-5.633,0-10.199,4.566-10.199,10.199v49.148c0,5.633,4.566,10.199,10.199,10.199h35.106
			c5.633,0,10.199-4.566,10.199-10.199V58.135C380.412,52.502,375.846,47.936,370.213,47.936z M360.014,97.084h-14.707v-28.75
			h14.707V97.084z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M224.792,139.729h-35.106c-5.633,0-10.199,4.566-10.199,10.199v49.148c0,5.633,4.566,10.199,10.199,10.199h35.106
			c5.633,0,10.199-4.566,10.199-10.199v-49.148C234.991,144.295,230.425,139.729,224.792,139.729z M214.593,188.877h-14.707v-28.75
			h14.707V188.877z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M297.435,139.729h-35.106c-5.633,0-10.199,4.566-10.199,10.199v49.148c0,5.633,4.566,10.199,10.199,10.199h35.106
			c5.633,0,10.199-4.566,10.199-10.199v-49.148C307.634,144.295,303.068,139.729,297.435,139.729z M287.236,188.877h-14.707v-28.75
			h14.707V188.877z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M370.213,139.729h-35.106c-5.633,0-10.199,4.566-10.199,10.199v49.148c0,5.633,4.566,10.199,10.199,10.199h35.106
			c5.633,0,10.199-4.566,10.199-10.199v-49.148C380.412,144.295,375.846,139.729,370.213,139.729z M360.014,188.877h-14.707v-28.75
			h14.707V188.877z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M177.901,263.139h-42.416c-5.633,0-10.199,4.566-10.199,10.199v33.855c0,5.633,4.566,10.199,10.199,10.199h42.416
			c5.633,0,10.199-4.566,10.199-10.199v-33.855C188.1,267.706,183.534,263.139,177.901,263.139z M167.702,296.995h-22.018v-13.457
			h22.018V296.995z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M265.671,263.139h-42.416c-5.633,0-10.199,4.566-10.199,10.199v33.855c0,5.633,4.566,10.199,10.199,10.199h42.416
			c5.633,0,10.199-4.566,10.199-10.199v-33.855C275.871,267.706,271.304,263.139,265.671,263.139z M255.472,296.995h-22.018v-13.457
			h22.018V296.995z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M370.213,231.522h-35.106c-5.633,0-10.199,4.566-10.199,10.199v49.148c0,5.633,4.566,10.199,10.199,10.199h35.106
			c5.633,0,10.199-4.566,10.199-10.199v-49.148C380.412,236.088,375.846,231.522,370.213,231.522z M360.014,280.67h-14.707V251.92
			h14.707V280.67z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M177.901,339.633h-42.416c-5.633,0-10.199,4.566-10.199,10.199v33.855c0,5.633,4.566,10.199,10.199,10.199h42.416
			c5.633,0,10.199-4.566,10.199-10.199v-33.855C188.1,344.2,183.534,339.633,177.901,339.633z M167.702,373.489h-22.018v-13.457
			h22.018V373.489z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M265.671,339.633h-42.416c-5.633,0-10.199,4.566-10.199,10.199v33.855c0,5.633,4.566,10.199,10.199,10.199h42.416
			c5.633,0,10.199-4.566,10.199-10.199v-33.855C275.871,344.2,271.304,339.633,265.671,339.633z M255.472,373.489h-22.018v-13.457
			h22.018V373.489z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M177.901,418.167h-42.416c-5.633,0-10.199,4.566-10.199,10.199v33.855c0,5.633,4.566,10.199,10.199,10.199h42.416
			c5.633,0,10.199-4.566,10.199-10.199v-33.855C188.1,422.734,183.534,418.167,177.901,418.167z M167.702,452.023h-22.018v-13.457
			h22.018V452.023z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M265.671,418.167h-42.416c-5.633,0-10.199,4.566-10.199,10.199v33.855c0,5.633,4.566,10.199,10.199,10.199h42.416
			c5.633,0,10.199-4.566,10.199-10.199v-33.855C275.871,422.734,271.304,418.167,265.671,418.167z M255.472,452.023h-22.018v-13.457
			h22.018V452.023z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M370.213,323.315h-35.106c-5.633,0-10.199,4.566-10.199,10.199v49.148c0,5.633,4.566,10.199,10.199,10.199h35.106
			c5.633,0,10.199-4.566,10.199-10.199v-49.148C380.412,327.881,375.846,323.315,370.213,323.315z M360.014,372.463h-14.707v-28.75
			h14.707V372.463z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M370.722,434.566c-5.633,0-10.199,4.566-10.199,10.199v25.418c0,5.633,4.566,10.199,10.199,10.199
			c5.633,0,10.199-4.566,10.199-10.199v-25.418C380.921,439.132,376.355,434.566,370.722,434.566z" fill="#ffa200"></path>
	</g>
</g>
<g>
	<g>
		<path d="M370.722,403.888c-5.633,0-10.199,4.566-10.199,10.199v3.506c0,5.633,4.566,10.199,10.199,10.199
			c5.633,0,10.199-4.566,10.199-10.199v-3.506C380.921,408.455,376.355,403.888,370.722,403.888z" fill="#ffa200"></path>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                    <!-- <img src="./img/greek.png" alt="" style="width:100%;"> -->
                </div>
              </div>
              <div style="float:right;width:50%;text-align:right;">
                <h2>楼宇</h2>
                <h2>1</h2>
              </div>
            </div>
            <div :style="{flex:'1',fontSize:'1rem',color:'#fff',border:'1px solid #fff',borderRadius:'20px',padding:'10px 10px',overflow:'hidden'}">
              <div style="float:left;width:30%;">
                <div style="width:100%;height:100%;">
                  <svg height="200" viewBox="0 -55 512 512" width="200" xmlns="http://www.w3.org/2000/svg" style="width: 100%; height: 100%; vertical-align: middle; fill: currentcolor; overflow: hidden; font-size: 200px;"><path d="m512 129.101562-76.984375-35.734374v-93.367188h-100.042969v46.933594l-78.972656-36.652344-256 118.820312 12.628906 27.207032 34.335938-15.9375v261.683594h418.070312v-261.683594l34.335938 15.9375zm-204.339844 152.898438c-10.269531-17.917969-29.570312-30.023438-51.660156-30.023438-22.085938 0-41.390625 12.105469-51.660156 30.023438h-127.378906v-60.066406h358.078124v60.066406zm-22.140625 90.058594h-59.039062v-60.566406c0-16.277344 13.242187-29.519532 29.519531-29.519532s29.519531 13.242188 29.519531 29.519532zm-208.558593-180.121094v-60.066406h358.078124v60.066406zm288.007812-161.941406h40.050781v49.449218l-40.050781-18.589843zm17.128906 71.878906h-252.195312l126.097656-58.527344zm-305.136718 210.121094h119.523437v60.0625h-119.523437zm238.554687 60.0625v-60.0625h119.523437v60.0625zm0 0" fill="#4ec45a"></path></svg>
                    <!-- <img src="./img/greek.png" alt="" style="width:100%;"> -->
                </div>
              </div>
              <div style="float:right;width:50%;text-align:right;">
                <h2>房屋</h2>
                <h2>1</h2>
              </div>
            </div>
            <div :style="{flex:'1',fontSize:'1rem',color:'#fff',border:'1px solid #fff',borderRadius:'20px',padding:'10px 10px',overflow:'hidden'}">
              <div style="float:left;width:30%;">
                <div style="width:100%;height:100%;">
                  <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="200" height="200" viewBox="0 0 283.219 283.219" style="width: 100%; height: 100%; vertical-align: middle; fill: currentcolor; overflow: hidden; font-size: 200px;" xml:space="preserve">
<g>
	<g>
		<path d="M21.694,130.404l116.892-69.822l123.22,69.98c2.236,1.271,4.667,1.874,7.062,1.874c4.989,0,9.843-2.611,12.479-7.26
			c3.911-6.882,1.498-15.637-5.386-19.548L145.483,31.525c-4.494-2.553-10.008-2.49-14.435,0.159L6.988,105.788
			c-6.8,4.063-9.017,12.865-4.957,19.66C6.094,132.25,14.903,134.458,21.694,130.404z" fill="#1296db"></path>
		<path d="M65.359,233.852c0,10.889,8.823,19.714,19.714,19.714c10.883,0,19.704-8.825,19.704-19.714h69.708
			c0,10.889,8.825,19.714,19.704,19.714c10.893,0,19.714-8.825,19.714-19.714h10.547c10.558,0,19.117-8.56,19.117-19.116v-29.37
			c0-10.557-6.758-19.116-15.089-19.116h-15.094l-16.638-40.501c-4.005-9.763-15.816-17.681-26.374-17.681h-59.983
			c-10.557,0-22.367,7.917-26.381,17.681L67.377,166.25c0,0-6.21,0-13.861,0c-7.654,0-13.859,8.56-13.859,19.116v29.37
			c0,10.557,8.559,19.116,19.116,19.116H65.359z M201.054,179.392c9.903,0,17.922,8.027,17.922,17.922
			c0,9.898-8.019,17.922-17.922,17.922c-9.895,0-17.922-8.023-17.922-17.922C183.132,187.419,191.16,179.392,201.054,179.392z
			 M96.08,154.339l5.701-16.001c2.653-7.46,11.222-13.507,19.145-13.507h38.224c7.915,0,16.465,6.056,19.098,13.525l5.614,15.959
			c2.632,7.472-1.657,13.525-9.582,13.525H105.61C97.695,167.841,93.427,161.797,96.08,154.339z M82.135,179.392
			c9.901,0,17.921,8.027,17.921,17.922c0,9.898-8.021,17.922-17.921,17.922c-9.895,0-17.922-8.023-17.922-17.922
			C64.213,187.419,72.24,179.392,82.135,179.392z" fill="#1296db"></path>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
                    <!-- <img src="./img/greek.png" alt="" style="width:100%;"> -->
                </div>
              </div>
              <div style="float:right;width:50%;text-align:right;">
                <h2>车位</h2>
                <h2>1</h2>
              </div>
            </div>
          </div>



          <div style="display:flex;margin-bottom:8px;">
            <div style="flex:1;color:#fff;border:1px solid #fff;border-radius:20px;">
              
              <div style="width:100%;height:100%;box-sizing:border-box;padding:10px 10px;">
                <div id="circleCharts5" style="width:100%;min-height:200px"></div>
              </div>
            </div>
            <div style="flex:1;color:#fff;border:1px solid #fff;border-radius:20px;">
              <div style="width:100%;height:100%;box-sizing:border-box;padding:10px 10px;">
                <div id="circleCharts" style="width:100%;min-height:200px"></div>
              </div>
            </div>
            <div style="flex:1;color:#fff;border:1px solid #fff;border-radius:20px;">
              <div style="width:100%;height:100%;box-sizing:border-box;padding:10px 10px;">
                <div id="circleCharts2" style="width:100%;min-height:200px"></div>
              </div>
            </div>
            <div style="flex:1;color:#fff;border:1px solid #fff;border-radius:20px;">
              <div style="width:100%;height:100%;box-sizing:border-box;padding:10px 10px;">
                <div id="circleCharts3" style="width:100%;min-height:200px"></div>
              </div>
            </div>
            <div style="flex:1;color:#fff;border:1px solid #fff;border-radius:20px;">
              <div style="width:100%;height:100%;box-sizing:border-box;padding:10px 10px;">
                <div id="circleCharts4" style="width:100%;min-height:200px"></div>
              </div>
            </div>
          </div>
          
          <div style="display:flex;margin-bottom:8px;">
            <div style="flex:2;color:#fff;">

                <div style="width:100%;border:1px solid #fff;border-radius:20px;">

                  <div id="lineCharts1" style="width:100%;height:225px;box-sizing:border-box;padding:10px 10px;"></div>
                </div>
                <div style="width:100%;border:1px solid #fff;border-radius:20px;">
                  <div id="lineCharts2" style="width:100%;height:225px;box-sizing:border-box;padding:10px 10px;"></div>
                </div>
            </div>
            <div style="flex:2;color:#fff;border:1px solid #fff;border-radius:20px;">

                <div style="width:100%;height:100%;">

                <div id="mapCharts" style="width:100%;height:450px;box-sizing:border-box;padding:10px 10px;"></div>

                </div>
            </div>
            <div style="flex:1;color:#fff;">

                
                <div style="width:100%;border:1px solid #fff;border-radius:20px;">

                  <div id="blockCharts1" style="width:100%;height:225px;box-sizing:border-box;padding:10px 10px;"></div>
                </div>
                <div style="width:100%;border:1px solid #fff;border-radius:20px;">
                  <div id="blockCharts2" style="width:100%;height:225px;box-sizing:border-box;padding:10px 10px;"></div>
                </div>
            </div>
          </div>

          
          <div style="display:flex;">
            <div style="flex:1;color:#fff;">

                <div style="width:100%;border:1px solid #fff;border-radius:20px;">

                  <div id="blockCharts3" style="width:100%;height:225px;box-sizing:border-box;padding:10px 10px;"></div>
                </div>
            </div>
            <div style="flex:1;color:#fff;border:1px solid #fff;border-radius:20px;">

                <div style="width:100%;height:100%;">

                  <div id="lineCharts3" style="width:100%;height:225px;box-sizing:border-box;padding:10px 10px;"></div>

                </div>
            </div>
            <div style="flex:2;color:#fff;">

                <div style="width:100%;border:1px solid #fff;border-radius:20px;">

                  <div id="lineCharts4" style="width:100%;height:225px;box-sizing:border-box;padding:10px 10px;"></div>
                </div>

            </div>
            <div style="flex:1;color:#fff;">

                <div style="width:100%;border:1px solid #fff;border-radius:20px;">

                  <div id="lineCharts5" style="width:100%;height:225px;box-sizing:border-box;padding:10px 10px;"></div>
                </div>

            </div>
          </div>



</div>
</template>
<script>
let echarts = require('echarts/lib/echarts')
import svgs from '@/components/test/img/greek.png'
import china from 'echarts/map/js/china'
import hubei from 'echarts/map/js/province/hubei'
import yichang from 'echarts/map/json/yichang.json'
// require('echarts/lib/chart/bar')
// 引入提示框和title组件
// require('echarts/lib/component/tooltip')
// require('echarts/lib/component/title')
export default {
  name: 'test',
  props: {
    option: Object,
    component: Object
  },
  inject: ["main"],
  
  mounted(){
    let this_ = this;
    setTimeout(()=>{
      // this_.drawLine();
      this_.drawLine4('circleCharts4');
      this_.drawLine2('circleCharts3',{
        title:'停车费'
      });
      this_.drawLine3('circleCharts2');
      this_.drawLine2('circleCharts',{
        title:'停车费2'
      });
      this_.drawLine2('circleCharts5',{
        title:'停车费2'
      });
      
      this_.drawLine4('lineCharts1');
      this_.drawLine4('lineCharts2');

      this_.drawLine4('lineCharts3');
      this_.drawLine4('lineCharts4');
      this_.drawLine4('lineCharts5');

      
      this_.drawLine3('blockCharts1');
      this_.drawLine6('blockCharts2');
      this_.drawLine3('blockCharts3');

      this_.drawLine5('mapCharts');
    },600);
  },
  methods:{
    drawLine6(id){
        let myChart = echarts.init(document.getElementById(id));
      let option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直达', '营销广告', '搜索引擎', '邮件营销', '联盟广告', '视频广告', '百度', '谷歌', '必应', '其他']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],

            label: {
                position: 'inner'
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直达', selected: true},
                {value: 679, name: '营销广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        },
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '55%'],
            // label: {
            //     formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
            //     backgroundColor: '#eee',
            //     borderColor: '#aaa',
            //     borderWidth: 1,
            //     borderRadius: 4,
            //     // shadowBlur:3,
            //     // shadowOffsetX: 2,
            //     // shadowOffsetY: 2,
            //     // shadowColor: '#999',
            //     // padding: [0, 7],
            //     rich: {
            //         a: {
            //             color: '#999',
            //             lineHeight: 22,
            //             align: 'center'
            //         },
            //         // abg: {
            //         //     backgroundColor: '#333',
            //         //     width: '100%',
            //         //     align: 'right',
            //         //     height: 22,
            //         //     borderRadius: [4, 4, 0, 0]
            //         // },
            //         hr: {
            //             borderColor: '#aaa',
            //             width: '100%',
            //             borderWidth: 0.5,
            //             height: 0
            //         },
            //         b: {
            //             fontSize: 16,
            //             lineHeight: 33
            //         },
            //         per: {
            //             color: '#eee',
            //             backgroundColor: '#334455',
            //             padding: [2, 4],
            //             borderRadius: 2
            //         }
            //     }
            // },
            data: [
                {value: 335, name: '直达'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1048, name: '百度'},
                {value: 251, name: '谷歌'},
                {value: 147, name: '必应'},
                {value: 102, name: '其他'}
            ]
        }
    ]
};


        myChart.setOption(option);
    },
    drawLine5(id){
      // let dataList=[
      //       {name:"南海诸岛",value:0},
      //       {name: '北京', value: randomValue()},
      //       {name: '天津', value: randomValue()},
      //       {name: '上海', value: randomValue()},
      //       {name: '重庆', value: randomValue()},
      //       {name: '河北', value: randomValue()},
      //       {name: '河南', value: randomValue()},
      //       {name: '云南', value: randomValue()},
      //       {name: '辽宁', value: randomValue()},
      //       {name: '黑龙江', value: randomValue()},
      //       {name: '湖南', value: randomValue()},
      //       {name: '安徽', value: randomValue()},
      //       {name: '山东', value: randomValue()},
      //       {name: '新疆', value: randomValue()},
      //       {name: '江苏', value: randomValue()},
      //       {name: '浙江', value: randomValue()},
      //       {name: '江西', value: randomValue()},
      //       {name: '湖北', value: randomValue()},
      //       {name: '广西', value: randomValue()},
      //       {name: '甘肃', value: randomValue()},
      //       {name: '山西', value: randomValue()},
      //       {name: '内蒙古', value: randomValue()},
      //       {name: '陕西', value: randomValue()},
      //       {name: '吉林', value: randomValue()},
      //       {name: '福建', value: randomValue()},
      //       {name: '贵州', value: randomValue()},
      //       {name: '广东', value: randomValue()},
      //       {name: '青海', value: randomValue()},
      //       {name: '西藏', value: randomValue()},
      //       {name: '四川', value: randomValue()},
      //       {name: '宁夏', value: randomValue()},
      //       {name: '海南', value: randomValue()},
      //       {name: '台湾', value: randomValue()},
      //       {name: '香港', value: randomValue()},
      //       {name: '澳门', value: randomValue()}
      //   ]
      echarts.registerMap('yi_chang', yichang);
        let myChart = echarts.init(document.getElementById(id));
        function randomValue() {
            return Math.round(Math.random()*1000);
        }
        let option = {
          
        title: {
          text: '宜昌市数据',
          subtext: '实时数据',
          x: 'right',
          textStyle:{
            color:'#fff'
          }
        },
            tooltip: {
                    formatter:function(params,ticket, callback){
                        return params.seriesName+'<br />'+params.name+'：'+params.value
                    }//数据格式化
                },
            visualMap: {
                min: 0,
                max: 1500,
                left: 'left',
                top: 'bottom',
                text: ['高','低'],//取值范围的文字
                inRange: {
                    color: ['#e0ffff', '#006edd']//取值范围的颜色
                },
                show:true//图注
            },
            geo: {
                map: 'yi_chang',
                roam: false,//不开启缩放和平移
                zoom:1.23,//视角缩放比例
                label: {
                    normal: {
                        show: true,
                        fontSize:'10',
                        color: 'rgba(0,0,0,0.7)'
                    }
                },
                itemStyle: {
                    normal:{
                        borderColor: 'rgba(0, 0, 0, 0.2)'
                    },
                    emphasis:{
                        areaColor: '#F3B329',//鼠标选择区域颜色
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            series : [
                {
                    name: '信息量',
                    type: 'map',
            map: 'yi_chang',
            // // 地图类型
            // mapType: '湖北',
                    geoIndex: 0,
                    data:[ {name: '西陵区',value: Math.round(Math.random()*1000)},
                              {name: '点军区',value: Math.round(Math.random()*1000)},
                              {name: '伍家岗区',value: Math.round(Math.random()*1000)},
                              {name: '猇亭区',value: Math.round(Math.random()*1000)},
                              {name: '夷陵区',value: Math.round(Math.random()*1000)},
                              {name: '远安县',value: Math.round(Math.random()*1000)},
                              {name: '兴山县',value: Math.round(Math.random()*1000)},
                              {name: '秭归县',value: Math.round(Math.random()*1000)},
                              {name: '长阳土家族自治县',value: Math.round(Math.random()*1000)},
                              {name: '五峰土家族自治县',value: Math.round(Math.random()*1000)},
                              {name: '宜都市',value: Math.round(Math.random()*1000)},
                              {name: '当阳市',value: Math.round(Math.random()*1000)},
                              {name: '枝江市',value: Math.round(Math.random()*1000)},
                    ]
                }
            ]
        };
        myChart.setOption(option);
        myChart.on('click', function (params) {
            alert(params.name);
        });
    },
    drawLine4(id){
      let myChart = echarts.init(document.getElementById(id));
       let option = {
 
        // backgroundColor: '#FFF0F5',
 
        title: {
          text: '折线图',
          subtext: '模拟数据',
          x: 'center',
          textStyle:{
            color:'#fff'
          }
        },
 
        legend: {
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: 'horizontal',
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: 'left',
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: 'top',
          // data: ['预期','实际','假设']
          data: ['预期']
        },
 
        //  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
        grid: {
            top: '16%',   // 等价于 y: '16%'
            left: '3%', 
            right: '8%',
            bottom: '3%',
            containLabel: true
        },
 
        // 提示框
        tooltip: {
          trigger: 'axis'
        },
 
        //工具框，可以选择
        toolbox: {
            feature: {
                saveAsImage: {} //下载工具
            }
        },
 
        xAxis: {
          name: '周几',
          type: 'category',
          axisLine: {
            lineStyle: {
              // 设置x轴颜色
              color: '#912CEE'
            }
          },
          // 设置X轴数据旋转倾斜
          axisLabel: {
            rotate: 30, // 旋转角度
            interval: 0  //设置X轴数据间隔几个显示一个，为0表示都显示
            },
          // boundaryGap值为false的时候，折线第一个点在y轴上
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
 
        yAxis: {
          name: '数值',
          type: 'value',
          min:0, // 设置y轴刻度的最小值
          max:1800,  // 设置y轴刻度的最大值
          splitNumber:9,  // 设置y轴刻度间隔个数
          axisLine: {
            lineStyle: {
              // 设置y轴颜色
              color: '#87CEFA'
            }
          },
        },
 
        series: [
          {
            name: '预期',
            data: [820, 932, 301, 1434, 1290, 1330, 1320],
            type: 'line',
            // 设置小圆点消失
            // 注意：设置symbol: 'none'以后，拐点不存在了，设置拐点上显示数值无效
            symbol: 'none',
            // 设置折线弧度，取值：0-1之间
            smooth: 0.5,
          },
 
          // {
          //   name: '实际',
          //   data: [620, 732, 941, 834, 1690, 1030, 920],
          //   type: 'line',
          //   // 设置折线上圆点大小
          //   symbolSize:8,
          //   itemStyle:{
          //     normal:{
          //       // 拐点上显示数值
          //       label : {
          //       show: true
          //       },
          //       borderColor:'red',  // 拐点边框颜色
          //       lineStyle:{                 
          //         width:5,  // 设置线宽
          //         type:'dotted'  //'dotted'虚线 'solid'实线
          //       }
          //     }
          //   }
          // },
 
          // {
          //   name: '假设',
          //   data: [120, 232, 541, 134, 290, 130, 120],
          //   type: 'line',
          //   // 设置折线上圆点大小
          //   symbolSize:10,
          //   // 设置拐点为实心圆
          //   symbol:'circle',            
          //   itemStyle: {
          //     normal: {
          //       // 拐点上显示数值
          //       label : {
          //         show: true
          //       },
          //       lineStyle:{
          //         // 使用rgba设置折线透明度为0，可以视觉上隐藏折线
          //         color: 'rgba(0,0,0,0)'
          //       }
          //     }
          //   }
          // }
        ],
        
        color: ['#00EE00', '#FF9F7F','#FFD700']
      };
            myChart.setOption(option);
    },
    drawLine3(id){
      let myChart = echarts.init(document.getElementById(id));
          let option = {
                title : {
                   text: '办税人性别比例',//标题
                   x:'center'
               },



                // tooltip: {
                //     trigger: 'item',
                //     formatter: "{a} <br/>{b}: {c} ({d}%)"
                // },
                color:['#31b0d5','pink'],
                legend: {
                    // orient: 'vertical',
                    x: 'left',
                    y:'bottom',
                    data:['男','女']
                },
                series: [
                    {
                        name:'访问来源',
                        type:'pie',
                        radius: '55%',
                        itemStyle : {
                            normal : {
                                label : {
                                    show : true,
                                    formatter: "{b}:  ({d}%)",//显示标签
                                },
                                labelLine : {
                                    show : true,//显示标签线
                                    // length:10
                                },

                                    borderWidth:2, //设置border的宽度有多大
                                    borderColor:'#fff',

                            },

                        },

                        data:[
                            {value:147, name:'男'},
                            {value:102, name:'女'}
                        ]
                    }
                ]
            };
            // 为echarts对象加载数据
            myChart.setOption(option);
    },
    drawLine2(id,dataInfo){
       let myChart2 = echarts.init(document.getElementById(id));
    let option = {

title : {
                   text: dataInfo.title,//标题
                   x:'left',
          textStyle:{
            color:'#fff'
          }
               },

        tooltip: {//提示框，可以在全局也可以在
            trigger: 'item',  //提示框的样式
            formatter: "{a} <br/>{b}: {c} ({d}%)",
            color:'#000', //提示框的背景色
            textStyle:{ //提示的字体样式
                color:"#fff",
            }
        },
        legend: {  //图例
            orient: 'vertical',  //图例的布局，竖直    horizontal为水平
            x: 'left',//图例显示在右边
            y: 'center',
            // data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
            textStyle:{    //图例文字的样式
                color:'#fff',  //文字颜色
                fontSize:12    //文字大小

            }
        },
        series: [
            {
                name:'访问来源',
                type:'pie', //环形图的type和饼图相同
                radius: ['50%', '70%'],//饼图的半径，第一个为内半径，第二个为外半径
                avoidLabelOverlap: false,
                color:['#D1FBEF','#F9D858','#4CD0DD','#DF86F0','#F5A7C1'],
                label: {
                    normal: {  //正常的样式
                        show: false,
                        position: 'left'
                    },
                    emphasis: { //选中时候的样式
                        show: false,
                        textStyle: {
                            fontSize: '20',
                            fontWeight: 'bold',
                            color:'#fff'
                        }
                    }
                },  //提示文字
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data:[
                    {value:335, name:'直接访问'},
                    {value:310, name:'邮件营销'},
                    {value:234, name:'联盟广告'},
                    {value:135, name:'视频广告'},
                    {value:1548, name:'搜索引擎'}
                ]
            }
        ]
    };
    myChart2.setOption(option);
    },
    drawLine(){
        // 基于准备好的dom，初始化echarts实例
        // 绘制图表
        let chartId = document.getElementById('myChart');
        let myChart = this.$echarts.init(chartId)
        myChart.clear();

        myChart.setOption({
            title: { 
              text: '在Vue中使用echarts' ,
              textStyle:{

              color:'#fff'
              }
              },
            tooltip: {},
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        });

        window.addEventListener('resize', function () {
              myChart.resize()
        });
        
    }
  },
  computed: {
    fontSize () {
      return (this.option.fontSize || 30) + 'px'
    },
    getContent (){
      // console.log(1111111111111111111111111);
      // alert(666);
      // debugger;
      return this.option.value;
    },
    getSvgs (){
      return this.svgs;
    },
    //为图表计算高度
    // chartssize(container, charts) {
    //   console.log(window);
    //   function getStyle(el, name)
    //   {
    //     el = el.$el
    //     console.log(el);
    //     if (window.getComputedStyle) {
    //       return window.getComputedStyle(el, null);
    //     } else {
    //       return el.currentStyle;
    //     }
    //   }
    //   let wi = getStyle(container, 'width').width;
    //   let hi = getStyle(container, 'height').height;
    //   console.log(container);
    //   console.log(charts);
    //   charts.$el.style.height = hi;
    // },



  }
}
</script>